<template>
  <div class="w-p100">
    <div class="box box-ver w-p100">
      <router-view class="router-view"></router-view>
      <div class="user box box-ac">
        <div class="head icon" :style="{'background-image': 'url('+require('../assets/images/icon-head-default.jpg')+')'}"></div>
        <div class="box-f1">{{showUser.nickname}}</div>
        <img class="icon-arrow-right" :src="require('../assets/images/icon-arrow-right.png')" alt="">
      </div>
      <div @click="openCollection()" class="line box box-ac">
        <img class="icon" :src="require('../assets/images/icon-collection.png')" alt="">
        <div class="box-f1">我的收藏</div>
        <img class="icon-arrow-right" :src="require('../assets/images/icon-arrow-right.png')" alt="">
      </div>
      <div @click="$router.push('/myVip')" class="line box box-ac">
        <img  class="icon" :src="require('../assets/images/icon-vip.png')" alt="">
        <div class="box-f1">我的驾照</div>
        <img class="icon-arrow-right" :src="require('../assets/images/icon-arrow-right.png')" alt="">
      </div>
      <div @click="$router.push('/vipGet')" class="line box box-ac">
        <img  class="icon" :src="require('../assets/images/icon-vip-open.png')" alt="">
        <div class="box-f1">获取驾照</div>
        <img class="icon-arrow-right" :src="require('../assets/images/icon-arrow-right.png')" alt="">
      </div>
      <div @click="quitLogin()" class="quit line box box-ac box-jc">退出登录</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { openToast } from '@/assets/js/tools'
export default {
  name: 'userInfo',
  components: {
  },
  data () {
    return {
      showUser: {},
      imgData: '',
      cropperConfig: {
        width: 1,
        height: 1,
        quality: 0.5,
        maxWidth: 200
      }
    }
  },
  computed: mapState(['userInfo']),
  mounted () {
    this.showUser = JSON.parse(JSON.stringify(this.userInfo))
  },
  methods: {
    quitLogin () {
      this.$store.commit('userInfo', {})
      this.$router.replace('/login')
    },
    openCollection () {
      if (!this.userInfo.vip) {
        return this.$tools.popup({
          tpl: 'alert',
          title: '提示',
          content: `有驾照才能收藏电影哦`,
          buttons: ['取消', `<div class="tc-main">获取驾照</div>`],
          buttonCallBack: index => {
            if (index === 1) {
              this.$router.push('/vipGet')
            }
          }
        })
      }
      this.$router.push('/collection')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config.scss';
@import '../assets/css/mixins.scss';
.user{
  height:2rem;
  padding:0 .25rem;
  font-size:.4rem;
  border-bottom:1px solid $borderColor;
  .head{
    width:1.2rem;
    height:1.2rem;
    border-radius:50%;
    margin-right:.25rem;
  }
}
.icon-arrow-right{
  height:.6rem;
}
.line{
  padding:0 .25rem;
  height:1rem;
  font-size:.34rem;
  border-bottom:1px solid $borderColor;
  .icon{
    width:.6rem;
    height:.6rem;
    margin-right:.25rem;
  }
  .icon-arrow-right{
    height:.5rem;
  }
}
.quit{
  // background-color:$themeColor;
  margin-top:1.5rem;
  border-top:1px solid $borderColor;
  color:red;
  text-align:center;
  font-size:.38rem;
}
</style>
